<template>
  <div class="emergency_box">
    <div class="emergency_top">
      <div class="emergency_title">设备利用率</div>
      <div class="emergency_month">
        <div class="emergency_month_item" :class="searchDateNumber == 2? 'emergency_month_current':''" @click="buttonClick(2)"><span>近三个月</span></div>
        <div class="emergency_month_item" :class="searchDateNumber == 1? 'emergency_month_current':''" @click="buttonClick(1)"><span>上月</span></div>
        <div class="emergency_month_item" :class="searchDateNumber == 0? 'emergency_month_current':''" @click="buttonClick(0)"><span>本月</span></div>
      </div>
    </div>

    <div v-if="JSON.stringify(tableData) !='[]' " class="echarts_container">
      <div id="map7" style="height: 100%;" />
    </div>
    <div v-else class="echarts_noData">
      <svg-icon icon-class="暂无数据" />
    </div>
  </div>
</template>

<script>
import { deviceUseRate } from '@/api/system/largeScreen'
import { mapGetters } from 'vuex'
export default {
  name: 'EmergencyDegreeDistribution',
  computed: {
    ...mapGetters([
      'windowResizeTag'
    ])
  },
  watch: {
    windowResizeTag() {
      if (this.myChart || this.vertical) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.drawLine()
          }, 500)
        })
      }
    }
  },
  data() {
    return {
      tableData: ['1'],
      searchDateNumber: 0,
      myChart: undefined,
      timer: undefined,
      pageData: {
        pageNum: 1,
        pageSize: 4,
        companyId: this.$store.state.user.companyId,
        type: 1
      }
    }
  },
  beforeDestroy() {
    // 页面关闭清除定时器
    clearInterval(this.timer)
  },
  mounted() {
    this.buttonClick(0)
  },
  methods: {
    buttonClick(index) {
      clearInterval(this.timer)
      this.pageData.pageNum = 1
      this.searchDateNumber = index
      switch (index) {
        case 0:
          this.pageData.type = 3
          break
        case 1:
          this.pageData.type = 2
          break
        case 2:
          this.pageData.type = 1
          break
      }
      this.getList()

      this.timer = setInterval(() => {
        this.getList()
      }, this.$store.state.common.refreshFrequency * 1000)
    },
    getList() {
      deviceUseRate(this.pageData).then(res => {
        this.tableData = res.data
        if (res.data.left < 4) {
          this.pageData.pageNum = 1
        } else {
          this.pageData.pageNum++
        }
        this.$nextTick(() => {
          this.drawLine()
        })
      })
    },
    drawLine() {
      // if (this.myChart) {
      //   console.log(this.myChart)
      //   this.myChart.dispose()
      //   clearInterval(this.timer)
      //   console.log(this.timer)
      // }
      if (this.myChart) {
        this.$echarts.init(document.getElementById('map7')).dispose()
      }
      this.myChart = this.$echarts.init(document.getElementById('map7'))
      const option = {
        grid: {
          left: '12%',
          top: '15%',
          right: '3%',
          bottom: '20%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            return params[0].name + '<br/>' +
                "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#FF9ADC'></span>" + '利用率: ' + params[0].value + '%'
          }
        },
        xAxis: {
          data: this.tableData.map(item => item.deviceName),
          axisLine: {
            show: false, // 隐藏X轴轴线
            lineStyle: {
              color: 'rgba(153, 153, 153, 0.3)'
            }
          },
          axisTick: {
            show: false, // 隐藏X轴刻度
            alignWithLabel: true
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#666666', // X轴文字颜色
              fontSize: 14
            },
            interval: 0,
            avoidLabelOverlap: true,
            formatter: function(value) { // X轴的内容
            // console.log(value)
              // var value = 'G754-6/等离子粉末对焊机'
              var ret = '' // 拼接加\n返回的类目项
              var max = value.split('/')[0].length // 每行显示的文字字数
              console.log('max', max)
              var newVaule = value.split('/')[0] + value.split('/')[1]
              var val = newVaule.length // X轴内容的文字字数
              var rowN = Math.ceil(val / max) // 需要换的行数
              if (rowN > 1) { // 判断 如果字数大于截取字符串的长度就换行
                for (var i = 0; i < rowN; i++) {
                  var temp = '' // 每次截取的字符串
                  var start = i * max // 开始截取的位置
                  var end = start + max // 结束截取的位置
                  if (max > 11) {
                    ret = newVaule.substring(0, 11) + '...' + '\n'
                  } else {
                    ret = newVaule.substring(0, start) + '\n'
                  }
                  temp = newVaule.substring(start, end) + '\n'
                  // ret += temp // 最终的字符串
                }
                return `{a|${ret}}${temp}`
              } else { return value.split('/')[0] + value.split('/')[1] }
            },
            rich: {
              a: { padding: [0, 0, 5, 0], color: '#666666', fontSize: 14 }
            }
          }
        },
        // dataZoom: [
        //   {
        //     show: false, // 为true滚动条出现
        //     type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
        //     startValue: 0, // 从头开始。
        //     endValue: 5 // end百分比显示范围，endValue具体显示几个数值
        //   }
        // ],
        yAxis: {
          type: 'value',
          nameTextStyle: {
            color: '#666666',
            fontSize: 14
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(153, 153, 153, 0.3)'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false, // 隐藏X轴轴线
            lineStyle: {
              color: '#999999'
            }
          },
          axisLabel: {
            show: true,
            formatter: '{value}%',
            textStyle: {
              color: '#666666',
              fontSize: 14
            },
            margin: 20
          }
        },
        series: [
          {
            // name: this.tableData.deviceName,
            type: 'bar',
            barWidth: 12,
            itemStyle: {
              normal: {
                color: '#FF9ADC',
                barBorderRadius: [20, 20, 0, 0]
                // shadowColor: 'rgba(0, 0, 0, 0.3)',
                // shadowOffsetX: 2, // 折线的X偏移
                // shadowOffsetY: 0, // 折线的Y偏移
                // shadowBlur: 6 // 折线模糊
              }
            },
            data: this.tableData.map(item => item.val)
          }
        ]
      }
      // option.dataZoom[0].endValue = 3
      // option.dataZoom[0].startValue = 0

      this.myChart.setOption(option)
      // setTimeout(() => {
      //   this.timer = setInterval(() => {
      //   // clearInterval(this.timeOut)
      //   // 每次向后滚动一个，最后一个从头开始。
      //   // if(this.stopMove){ return }
      //     if (Number(option.dataZoom[0].endValue) >= option.series[0].data.length - 1) {
      //       option.dataZoom[0].endValue = 3
      //       option.dataZoom[0].startValue = 0
      //     } else {
      //       option.dataZoom[0].endValue = option.dataZoom[0].endValue + 4
      //       option.dataZoom[0].startValue = option.dataZoom[0].startValue + 4
      //     }
      //     this.myChart.setOption(option)
      //   }, 10000)
      // }, 10000)
    }
  }
}
</script>

<style lang="less" scoped>
.emergency_box{
  width: 100%;
  height: calc(100% - 50px);
}
  .emergency_top{
    display: flex;
    justify-content: space-between;
    .emergency_title{
      font-size: 20px;
      line-height: 34px;
      font-weight: bold;
      letter-spacing: -0.21px;
      color: #333333;
      padding-top: 16px;
      padding-left: 20px;
    }
    .emergency_month{
      display: flex;
      font-size: 18px;
      font-weight: normal;
      line-height: 25px;
      letter-spacing: -0.16px;
      color: #999999;
      padding-top: 22px;
      padding-right: 20px;
      cursor: pointer;
      .emergency_ThisMarch1{
        font-size: 18px;
        font-weight: normal;
        line-height: 25px;
        letter-spacing: -0.16px;
        color: #387BFC;
        padding-right: 30px;
      }
      .emergency_ThisMarch2{
        font-size: 18px;
        font-weight: normal;
        line-height: 25px;
        letter-spacing: -0.16px;
        color: #387BFC;
      }
      .emergency_March{
        padding-right: 30px;
      }
      .emergency_month_item:not(:last-child){
        padding-right: 30px;
      }
      .emergency_month_current{
        color: #387BFC;
      }
    }
  }

.echarts_container{
  width: 100%;
  height: 100%;
}
</style>

